<template>
	<view class="goods">
		<section class="goods-content">
			<section class="goods-menu">
				<view 
					v-for="(menu_item, menu_index) in goods_list" 
					:key="menu_index"
					:class="current_menu_index == menu_index ? 'goods-menu-cell active' : (current_menu_index-1) == menu_index ? 'goods-menu-cell active-prev' : (current_menu_index+1) == menu_index ? 'goods-menu-cell active-next' : 'goods-menu-cell'"
					@click="handle_menu_change(menu_index)"
					
					>{{menu_item.menu_name}}</view>
			</section>
			
			<section class="goods-list">
				<view class="goods-title">
					<view class="goods-title-main">全部</view>
					<view class="goods-title-sort">
						<view class="goods-sold-sort">销量</view>
						<view class="goods-price-sort">
							<span style="margin-right: 10rpx;">价格</span>
							<span style="margin-right: 10rpx;">
								<u-icon name="arrow-up-fill" :color="sort_price == 1 ? '#EF806D' : '#979797'" size="6"></u-icon>
								<u-icon name="arrow-down-fill" :color="sort_price == 2 ? '#EF806D' : '#979797'" size="6"></u-icon>
							</span>
						</view>
					</view>
				</view>
				
				<view class="goods-card-list">
					<view class="goods-card" v-for="(good,index) in goods_list[current_menu_index].list" :key="index" @click="goods_detail_visible = true">
						<view class="goods-cover">
							<image style="width: 100%;height: 100%" :src="good.cover" mode=""></image>
						</view>
						
						<view class="goods-details">
							<view class="goods-name">
								{{ good.goods_name }}
							</view>
							<view class="goods-desc">
								{{ good.goods_desc }}
							</view>
							<view class="goods-sold">
								已售 {{ good.goods_sold || 0 }}
							</view>
							<view class="goods-operation">
								<view class="goods-price">
									￥<span class="goods-price-main">{{ good.goods_price || 0 }}</span>
								</view>
								
								<view class="goods-num">
									 <u-number-box v-model="good.mount" min="0" :showMinus="good.mount > 0 ? true : false">
									        <template #minus>
									            <view class="minus" @click="handle_add_to_cart(good, 'dec')">
									                <u-icon name="minus" size="12" color="#fda085"></u-icon>
									            </view>
									        </template>
									        <template #input>
									            <text style="width: 50rpx;height: 100%;text-align: center;" class="input" >
													{{ (good.amount && good.amount) > 0 ? good.amount : ''}}
												</text>
									        </template>
									        <template #plus>
									            <view class="plus" @click="handle_add_to_cart(good, 'inc')">
									                <u-icon name="plus" color="#FFFFFF" size="12" ></u-icon>
									            </view>
									        </template>
									    </u-number-box>
								</view>
							</view>
						</view>
					</view>
					
					
					
				</view>
			</section>
		</section>
		
<!-- 		<section class="shopping-cart">
			<view class="shopping-cart-detail" @click="goods_cart_detail_visible = true">
				<view class="shopping-cart-icon">
					<img src="/static/goods/shopping_cart_icon.png" style="width: 85rpx;height: 85rpx;" alt="">
				</view>
				<view class="shopping-cart-desc">
					<view class="shopping-cart-price">
						￥<span style="font-size: 35rpx;">58</span>
					</view>
					<view class="shopping-cart-tip">
						预估免配送费
					</view>
				</view>
			</view>
			
			<view class="shopping-cart-btn">
				<up-button type="primary" :disabled="goods_cart_list.length <= 0 ? true : false" shape="circle" color="#EF806D" style="width: fit-content;padding: 0 70rpx;" text="去结算"></up-button>
			</view>
		</section> -->
		
		<section class="balance">
			<view class="balance-info" @click="handle_open_cart">
				<view class="cart-icon">
					<image src="/static/goods/icon_cart.svg" style="width: 30px;height: 30px;" mode=""></image>
					<view class="dot" v-if="data_cart_amount > 0">{{ data_cart_amount }}</view>
				</view>
		
				<view class="price-box">
					<view class="price">￥{{ data_cart_total || 0 }}</view>
					<view class="postage">
						免配送费
					</view>
				</view>
			</view>
		
			<view class="balance-btn">
				<up-button :customStyle="{height: '100%',borderRadius: 0, color: '#fff',backgroundImage: 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)' }" @click="handle_balance()" text="去结算"></up-button>
			</view>
		</section>
		
		
		<u-popup :show="goods_cart_detail_visible" :customStyle="{
			minHeight: '0'
		}" mode="bottom" closeable zIndex="10071" round="20" :duration="100" safeAreaInsetBottom @close="goods_cart_detail_close" @open="goods_cart_detail_open">
		    <view>
		     
		    </view>
		</u-popup>
		<TabBar></TabBar>
		
		
		<!-- 已选商品预览 -->
		<!-- 选择规格 -->
		<u-popup :show="goods_had_select_visible" round="15" mode="bottom" @close="handle_close_cart()" @open="goods_had_select_visible = true">
			<view class="select-goods">
				<view class="select-goods-header">
					<span style="font-size: 28rpx;color: #333333">已选商品</span>
					<span style="font-size: 26rpx;color: #999999;z-index: 1000" @click="handle_clear_cart()">清空购物车</span>
				</view>
				
				<view class="select-goods-content">
					<view class="select-goods-card" v-for="(_item, _index) in data_cart" :key="_index">
						<img class="select-goods-cover" :src="
							_item?.goods_name == '经典安格斯牛肉汉堡' ? '/static/goods/burger1.png' :
							_item?.goods_name == '秘制鸡腿堡' ? '/static/goods/burger2.jpg' :
							_item?.goods_name == '辣肉酱牛肉汉堡' ? '/static/goods/burger3.jpg' :
							_item?.goods_name == '猛男汉堡' ? '/static/goods/burger4.jpg' :
							_item?.goods_name == '黑凤梨' ? '/static/goods/burger5.jpg' :
							_item?.goods_name == '培根牛肉芝士堡' ? '/static/goods/burger6.png' :
							_item?.goods_name == '脆薯饼牛肉芝士堡' ? '/static/goods/burger7.png' :
							_item?.goods_name == '全麦洋葱堡' ? '/static/goods/burger8.jpg' :
							_item?.goods_name == '能量炸弹双层厚牛堡' ? '/static/goods/burger9.png' :
							_item?.goods_name == '巨无霸' ? '/static/goods/burger10.jpg' :
							_item?.goods_name == '美式粗薯条' ? '/static/goods/pellet1.png' :
							_item?.goods_name == '蒜香大薯角' ? '/static/goods/pellet2.jpg' :
							_item?.goods_name == '脆薯饼' ? '/static/goods/pellet3.png' :
							_item?.goods_name == '秘制烤鸡翅' ? '/static/goods/pellet4.jpg' :
							_item?.goods_name == '劲爆鸡米花' ? '/static/goods/pellet5.jpg' :
							_item?.goods_name == '爆汁杏鲍菇' ? '/static/goods/pellet6.png' :
							_item?.goods_name == '脆皮鸡块' ? '/static/goods/pellet7.png' :
							_item?.goods_name == '蛋挞' ? '/static/goods/pellet8.jpg' :
							_item?.goods_name == '可乐' ? '/static/goods/drink1.jpg' :
							_item?.goods_name == '雪碧' ? '/static/goods/drink2.jpg' : ''
						" />
						<view class="select-goods-card-right">
							<view class="select-goods-info">
								<view class="select-goods-info-desc">
									{{_item?.goods_name}} <br>
									<span style="font-size: 26rpx;color: #999999">+ {{_item?.goods_pellet}}</span>
								</view>
								
								<view class="select-goods-info-desc">
									￥{{_item?.total_price}}
								</view>
							</view>
							
							<view class="select-goods-up-number">
								<view :class="_item.amount > 0 ? 'dec' : 'dec disabled'" @click="dec(_item)">
									<up-icon name="minus" :color="_item.amount <= 1 ? '#c8c9cc' : '#323233'"></up-icon>
								</view>
								<input class="up-number-box" type="number" disabled="true" :value="_item?.amount" />
								<view :class="_item.amount < 10 ? 'inc' : 'inc disabled'" @click="inc(_item)">
									<up-icon name="plus"  :color="_item.amount >= 10 ? '#c8c9cc' : '#323233'"></up-icon>
								</view>
		
							</view>
						</view>
					</view>
					
		
				</view>
				
				<view class="select-goods-footer">
					<span style="font-size: 28rpx;margin-right: 60rpx">包装费</span>
					<span style="font-size: 26rpx">￥0</span>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 商品详情预览 -->
		<u-popup :show="goods_detail_visible" round="30" mode="bottom" @close="handle_close_detail()" @open="goods_detail_visible = true">
			<view class="goods-detail-window">
				<section class="swiper">
					<view class="window-close" @click="goods_detail_visible = false">
						<image src="/static/goods/icon_arrow_down.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					</view>
					<up-swiper
					    :list="select_good_detail && select_good_detail.goods_cover ? select_good_detail.goods_cover : []"
					    indicator
					    indicatorMode="line"
					    circular
					></up-swiper>
				</section>
				
				<section class="goods-info">
					<view class="window-cell goods-price">单价: &yen;{{ select_good_detail && select_good_detail.goods_price }}</view>
					<view class="window-cell goods-name">{{ select_good_detail && select_good_detail.goods_name }}</view>
					<view class="window-cell goods-sold">月售{{ select_good_detail && select_good_detail.sold }}+</view>
				</section>
				
				<section class="desc-box">
					<view class="window-cell">
						<view class="window-cell-label">服务</view>
						<view class="window-cell-value">不支持7天无理由退货</view>
					</view>
					
					<view class="window-cell">
						<view class="window-cell-label">配送</view>
						<view class="window-cell-value">
							<view class="window-cell-flag">
								商家自配
							</view>
							现在下单，预计最快约<span style="color: #fda085;">{{ select_good_detail && select_good_detail.delivery_time }}</span>送达
						</view>
					</view>
				</section>
				
				
				<section class="bottom">
					<view class="cart">
						<image src="/static/goods/cart.png" mode="" style="width: 45rpx;height: 45rpx"></image>
						购物车
					</view>
					<view class="add-cart-btn">
						加入购物车
					</view>
				</section>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script setup>
	import TabBar from "../components/tab_bar.vue"
	import { ref, reactive } from "vue"
	
	const current_menu_index = ref(0);	// 当前选中菜单栏索引
	const minimum_delivery_amount = 25;	// 起送价格
	const goods_cart_list = ref([]);	// 购物车商品列表
	
	const sort_price = ref(0);	// 价格排序 1.升序  2.降序
	
	const menu_list = ref(new Array(10).fill({	// 菜单列表
		name: "水果蔬菜",
		category_id: 2
	}))
	
	const goods_num = ref(0)
	
	const goods_list = ref(new Array(20).fill({
		menu_name: "休闲零食",
		list: [
			{
				cover: "",
				goods_name: "【约6斤180*200cm】秋冬保暖被芯宿舍单双",
				goods_desc: "不褪色不起球床单",
				goods_price: "15",
				goods_stock: "100",
				goods_sold: "6",
				amount: "0",
			}
		]
	}))
	
	const goods_cart_detail_visible = ref(false);	// 购物车商品详情
	const goods_cart_detail_open = () => {
		goods_cart_detail_visible.value = true
	}
	const goods_cart_detail_close = () => {goods_cart_detail_visible.value = false}
	
	
	// 切换菜单栏
	const handle_menu_change = (index) => {
		current_menu_index.value = index
	}
	
	
	/* 选择商品加入购物车 */
	const goods_spec_select_visible = ref(false);
	/* 当前订单项的数量 */
	const current_order_item_amount = ref(1);
	/* 当前点击选择选中的商品缓存信息 */
	const current_select_goods_info = ref(null);
	// 创建订单项信息
	const handle_select_current_good = (good) => {
		
		// 重置当前订单项的数量和上次选中的加料&当前商品默认的数量
		current_order_item_amount.value = 1;
		current_spec_select_index.value = [];
		// 初始化订单项内容
		current_select_goods_info.value = {
			...good,
			total_price: good.price,
			goods_pellet: "",
			goods_pellet_price: 0,	// 加料总价
			amount: 1
		}
		goods_spec_select_visible.value = true;
	}
	// 修改订单项数量
	// const current_select_goods_num_change = (e) => {
	// 	// 商品单价
	// 	let main_price = Number(current_select_goods_info.value.price);
	// 	// 加料总价
	// 	let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
	// 	current_order_item_amount.value = e.value;
	// 	current_select_goods_info.value.amount = e.value;
	// 	current_select_goods_info.value.total_price = Number(e.value) * (main_price + pellet_price)
	// }
	
	// 选择商品 --- 减少商品数量
	const current_good_dec = () => {
		if(Number(current_order_item_amount.value) <= 1) { return }; 
		current_order_item_amount.value --
		// 商品单价
		let main_price = Number(current_select_goods_info.value.price);
		// 加料总价
		let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
		// 商品总数
		let amount = Number(current_order_item_amount.value)
		current_select_goods_info.value.amount = current_order_item_amount.value
		current_select_goods_info.value.total_price = amount * (main_price + pellet_price)
	}
	// 选择商品 --- 增加商品数量
	const current_good_inc = () => {
		if(Number(current_order_item_amount.value) >= 1000) { return }; 
		current_order_item_amount.value ++
		// 商品单价
		let main_price = Number(current_select_goods_info.value.price);
		// 加料总价
		let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
		// 商品总数
		let amount = Number(current_order_item_amount.value)
		current_select_goods_info.value.amount = current_order_item_amount.value
		current_select_goods_info.value.total_price = amount * (main_price + pellet_price)
	}
	/* 已选择商品列表购物车 */
	const goods_had_select_visible = ref(false);
	
	/* 当前选中商品购物车缓存数据(存储到缓存里前往结算页面生成订单) */
	let data_cart = reactive([]);
	const data_cart_amount = ref(0);	// 购物车商品总数
	const data_cart_total = ref(0);		// 购物车商品总价	
	
	// 购物车商品加减数量
	// const handle_item_amount_change = (e, item) => {
	// 	// current_select_goods_info.value.amount = e.target.value
	// 	item.amount = e.target.value
	// }
	

	
	// 打开购物车预览
	const handle_open_cart = () => {
		if(data_cart && data_cart.length > 0){
			goods_had_select_visible.value = true
		}
	}
	
	// 关闭购物车
	const handle_close_cart = () => {
		// 更新商品总数和总价
		let total_price = 0;
		let total_amount = 0;
		for(let i=0; i<data_cart.length; i++){
			total_price += Number(data_cart[i].total_price)
			total_amount += Number(data_cart[i].amount)
		}
		data_cart_amount.value = total_amount
		data_cart_total.value = total_price
		goods_had_select_visible.value = false;
	}
	
	// 购物车预览 增加&减少商品
	const dec = (item) => {
		if(item.amount <= 1) { return }
		item.amount --
		// 计算订单项总价	减少一个商品就减去该订单项上所有的加料总价和商品单价
		item.total_price -= (Number(item.goods_pellet_price) + Number(item.price))
	}
	
	const inc = (item) => {
		if(item.amount >= 1000) { return }
		item.total_price += (Number(item.goods_pellet_price) + Number(item.price))
		item.amount ++
	}
	
	// 清空购物车
	const handle_clear_cart = () => {
		uni.showModal({
			title: '温馨提示',
			content: '是否确认清空购物车?',
			success: function (res) {
				if (res.confirm) {
					data_cart = [];
					data_cart_amount.value = 0;
					data_cart_total.value = 0;
					goods_had_select_visible.value = false;
					uni.showToast({
						title: '已为您清空购物车',
						duration: 2000
					});
				} else if (res.cancel) {
					
				}
			}
		});
	}
	
	// 加入购物车，将订单项加入购物车
	const handle_add_to_cart = (current_good_info, type) => {

		// 所选商品数量不能大于100 不能小于0
		if(type == 'inc' && current_good_info.amount >= 10) return
		if(type == 'dec' && current_good_info.amount <= 0) return

		// 所选商品数量减到0则从购物车删除当前选中的商品
		if(type == 'dec' && current_good_info.amount == 1) {
			for(let i=0; i<length; i++){
				if(data_cart[i].goods_id == current_good_info.goods_id){
					data_cart.splice(i, i+1);
					// data_cart_amount.value -= Number(current_good_info.amount);
					// data_cart_total.value -= Number(current_good_info.total_price);
					break;
				}
			}
		}
		

		
		// 1. 订单项推入栈 （如果栈中存在商品，则更新数量，如果不存在则推入栈）
		let temp = 0;
		let length = data_cart.length
		if(length > 0) for(let i=0; i<length; i++){
			// 如果选择了两个完全一样的商品，则合并为一个订单项，反之为两个订单项 (区分相同的商品加料不同的情况)
			if(data_cart[i].goods_id == current_good_info.goods_id){
				type == 'inc' ? data_cart[i].amount += current_good_info.amount : type == 'dec' ? data_cart[i].amount -= current_good_info.amount : ''
				type == 'inc' ? data_cart[i].total_price += current_good_info.total_price : type == 'dec' ? data_cart[i].total_price += current_good_info.total_price : ''
				temp ++
			}
		}

		
		// 初始化商品对象 加入购物车
		temp <= 0 && data_cart.push({
			...current_good_info,
			total_price: current_good_info.price,
			amount: 1
		})
		
		

		if(type == 'inc'){
			// 2. 计算购物车总数
			data_cart_amount.value += Number(current_good_info.amount);
			// 3. 计算购物车总价
			data_cart_total.value += Number(current_good_info.total_price);
			current_good_info.amount ++
		} else if(type == 'dec'){
			data_cart_amount.value -= Number(current_good_info.amount);
			data_cart_total.value -= Number(current_good_info.total_price);
			current_good_info.amount --
		}
		

		console.log(current_good_info.amount)
			
	}
	
	// 关闭商品详情窗口
	const goods_detail_visible = ref(false);
	const handle_close_detail = () => {
		goods_detail_visible.value = false
	}
	
	const select_good_detail = ref(null);
	// 查询当前选中的商品详情
	const fetch_goods_detail = () => {
		
	}
	
	
	// 去结算
	const handle_balance = () => {
		// 将订单项列表存入缓存，生成预订单状态
		uni.setStorageSync('order_info', {
			order_items: data_cart,
			total_amount: data_cart_amount.value,
			total_price: data_cart_total.value
		});
		
		// uni.redirectTo({
		// 	url: "/pages/balance/index",
		// 	animationType: "pop-in",
		// 	animationDuration: 300
		// });
		
	}
</script>

<style lang="scss">
	.goods{
		width: 100%;
		height: calc(100vh - 100rpx);
		
		// .shopping-cart{
		// 	width: 100%;
		// 	height: 120rpx;
		// 	padding: 10rpx 20rpx;
		// 	box-sizing: border-box;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
			
			
		// 	.shopping-cart-detail{
		// 		width: fit-content;height: 100%;display: flex;
		// 		.shopping-cart-icon{
		// 			width: fit-content;
		// 			height: 100%;
		// 			margin-right: 25rpx;
		// 			display: flex;;
		// 			align-items: center;
		// 			justify-content: center;
		// 		}
		// 		.shopping-cart-desc{
		// 			width: fit-content;
		// 			height: 100%;
		// 			display: flex;;
		// 			flex-direction: column;;
		// 			padding: 10rpx 0;
		// 			box-sizing: border-box;
		// 			.shopping-cart-price{flex: 0.6;display: flex;align-items: center;font-size: 13px;color: #000}
		// 			.shopping-cart-tip{flex: 0.4;display: flex;align-items: center;font-size: 11px;color: #c8c9cc;}
		// 		}
		// 	}
		// }
		
		.balance{
			width: 100%;
			height: 120rpx;
			background-color: #f0f0f0;
			padding-left: 15px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.balance-info{
				width: 380rpx;
				height: 100%;
				display: flex;;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;
				font-size: 14px;
				
				.cart-icon{
					width: 115rpx;
					height: 115rpx;
					background-color: #fff;
					border-radius: 100%;
					display: flex;
					align-items: center;;
					justify-content: center;
					position: relative;
					transform: translateY(-10rpx);
					
					
					.dot{
						position: absolute;
						top: -5rpx;
						right: 0;
						width: 37rpx;
						height: 37rpx;
						font-size: 12px;
						background-color: #EF806D;
						display: flex;;
						align-items: center;;
						justify-content: center;;
						color: #fff;
						border-radius: 100%;
					}
				}
				
				.price-box{
					width: fit-content;
					height: 100%;
					font-size: 14px;
					color: #999999;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;;
					justify-content: space-between;
					
					.price{
						font-size: 34rpx;
						color: #333333;
					}
					
					.postage{
						font-size: 26rpx;
					}
				}
			}
			
			.balance-btn{
				width: 220rpx;
				height: 100%;
			}
		}
		
		.goods-content{
			width: 100%;
			height: calc(100% - 120rpx);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			
			.goods-menu{
				width: 160rpx;
				height: 100%;
				overflow-y: scroll;
				background-color: #fff;
				-webkit-overflow-scrolling: touch;
				
				.goods-menu-cell{
					width: 100%;
					height: 90rpx;
					color: #82848a;
					display: flex;
					background-color: #f4f4f5;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
				}

				.goods-menu-cell.active{
					background: #fff;
					color: #333333;
					border-left: 3px solid #EF806D;
				}
				.goods-menu-cell.active-prev{
					border-radius: 0 0 15rpx 0;
				}
				.goods-menu-cell.active-next{
					border-radius: 0 15rpx 0 0;
				}
			}
			
			.goods-list{
				width: calc(100% - 160rpx);
				height: 100%;
				overflow-y: hidden;
				
				.goods-title{
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					
					.goods-title-main{
						width: auto;
						height: 100%;
						color: #000;
						font-weight: 550;
						display: flex;
						align-items: center;
						font-size:28rpx;
						letter-spacing: 1px;
						padding: 0 20rpx;
					}
					
					.goods-title-sort{
						width: auto;
						height: 100%;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #979797;
						.goods-sold-sort{margin-right: 40rpx;}
						.goods-price-sort{display: flex;align-items: center;}
					}
					
					
				}
				
				.goods-card-list{
					width: 100%;
					height: calc(100vh - 60rpx - 90rpx - 40rpx);
					overflow-y: scroll;
					display: flex;
					flex-direction: column;
					padding: 40rpx 0;
					box-sizing: border-box;
					
					.goods-card{
						width: calc(100% - 40rpx);
						height: auto;
						min-height: 200rpx;
						display: flex;
						justify-content: space-between;
						margin: 0 auto 40rpx;
						
						.goods-cover{
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
							overflow: hidden;
							background: #f4f4f5;
							
						}
						
						.goods-details{
							width: calc(100% - 220rpx);
							height: 100%;
							display: flex;
							flex-direction: column;
							position: relative;
							
							.goods-name{
								width: 100%;
								height: auto;
								font-size: 26rpx;
								font-weight: 550;
							}
							.goods-desc, .goods-sold{width: 100%;height: auto;font-size: 22rpx;color: #979797;margin: 6rpx 0}
							
							.goods-operation{
								    width: 100%;
								    display: flex;
									justify-content: space-between;
								    position: absolute;
								    left: 0;
								    bottom: 0;
									
									.goods-price{font-size: 24rpx;color: #fa3534; .goods-price-main{font-size: 30rpx}}
							}
						}
					}
				}
			}
		}
		
		
		.goods-detail-window{
			width: 100%;
			height: 98vh;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #f8f8f8;
			position: relative;
			
			.swiper{
				width: 100%;
				height: fit-content;
				min-height: 20vh;
				position: relative;
		
				
				.window-close{
					position: absolute;
					top: 25rpx;
					left: 25rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
					background-color: #fff;
					display: flex;;
					align-items: center;;
					justify-content: center;
					z-index: 1000;
				}
			}
			
			.goods-info, .desc-box{
				width: calc(100% - 40rpx);
				height: fit-content;
				margin: 20rpx auto 0;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background-color: #fff;
				
				.window-cell{
					width: 100%;
					height: 55rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #333333;
					
					.window-cell-label{
						color: #ccc;
						width: 60rpx;
						
					}
					
					.window-cell-value{
						width: calc(100% - 90rpx);
						color: #333333;
						display: flex;
						align-items: center;
						
						.window-cell-flag{
							width: fit-content;;
							height: fit-content;;
							padding: 5rpx 15rpx;
							box-sizing: border-box;
							border: 1px solid #ccc;
							font-size: 20rpx;
							border-radius: 20rpx;
							margin-right: 10rpx;
						}
					}
					
				}
			}
			
			
			.bottom{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 110rpx;
				background-color: #fff;
				padding: 10rpx 15rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.cart{
					width: 80rpx;
					display: flex;;
					flex-direction: column;
					align-items: center;;
					font-size: 20rpx;
					color: #333333;
				}
				
				.add-cart-btn{
					width: calc(100% - 120rpx);
					height: 70rpx;
					border-radius: 50rpx;
					color: #fff;
					font-size: 28rpx;
					display: flex;;
					align-items: center;
					justify-content: center;
					background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
				}
			}
			
			
		}
		
		
	}
	
	
	
	
	
	
	
	/* 动画开始 */
	.page-ani-enter-from, .page-ani-leave-to{
		opacity: 0;
	}
	
	/* 动画结束 */
	.page-ani-enter-to, .page-ani-leave-from{
		opacity: 1;
	}
	
	/* 动画过渡效果 */
	.page-ani-enter-active, .page-ani-leave-active{
		transition: opacity 2s ease;
	}
	
	.minus {
			width: 21px;
			height: 21px;
			border: 1px solid #fda085;
			border-radius: 100%;
			@include flex;
			justify-content: center;
			align-items: center;
		}
	
		.input {
			padding: 0 10px;
		}
	
		.plus {
			width: 21px;
			height: 21px;
			// border: 1px solid #fda085;
			// background-color: #fda085;
			background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
			border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
		}
	
	
	
	
</style>